<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域列表</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div style="text-align: center;line-height: normal">
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="test-table-demoReload" placeholder="请输入区域名称" autocomplete="off">
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="LAY-user-back-search" >
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </div>
        <span style="margin-left: 20px;color: red">点击表格的单元格，即可进行编辑修改，按enter（回车）保存</span>
        <div class="layui-card-body">
            <table class="layui-hide" id="tt" lay-filter="tt"></table>
        </div>
    </div>
</div>

</body>
<script type="text/html" id="caozuo">
    <input type="button" value="删除" class="layui-btn layui-btn-sm" lay-event="delete"/>
</script>
<script>
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;
    var language=navigator.language;//zh-CN简体中文  zh中文 zh-TW中文繁体  en英语  en-US英语美国 th泰语

    table.render({
        elem: '#tt',
        id: 'tt',
        toolbar: '#tb',
        url: '/area/selectArea',
        cols: [[
            {fixed: 'left',title: '序号',width: 70,type:'numbers',align: 'center'},
            {field: 'numbers',title: '客服数',width: 100,align: 'center'},
            {field: 'areaName',title: '区域名称（中文）',width: 150,align: 'center',edit: 'text'},
            {field: 'areaName_en',title: '区域名称（英文）',width: 150,align: 'center',edit: 'text'},
            {field: 'areaName_tai',title: '区域名称（泰文）',width: 150,align: 'center',edit: 'text'},
            {field: 'areaName_kh',title: '区域名称（柬埔寨）',width: 170,align: 'center',edit: 'text'},
            {field: 'areaDescribe',title: '简述',width: 250,align: 'center',edit: 'text'},
            {fixed: 'right',toolbar: '#caozuo',title: '操作',width: 150,align: 'center'}
        ]],
        page: true,
        page: {
            curr: layui.data("area_page").index
        },
        done: (res, curr, count) => {
            layui.data("area_page", {
                key: 'index',
                value: curr
            });
        }
    });

    //单元格编辑
    table.on('edit(tt)', function(obj){
        var value = obj.value   //得到修改后的值
            ,data = obj.data    //得到所在行所有键值
            ,field = obj.field;
        $.ajax({
            type: "POST",
            url: "/area/updateArea",
            data: {id:data.id,value:value,columname:field},
            success: function(data){
                if(data.code==0){
                    layer.msg('操作成功');
                }else{
                    layer.msg("修改失败");
                }
            }
        });

    });

    function search(){
        var text = $('#test-table-demoReload').val();
        table.reload('tt',{
            url:'/area/selectArea',
            where:{
                areaName:text,
            },
            page:{
                curr:1
            }
        })
    }

    //搜索
    $('.search').on('click',function () {
        search();
    });

    //监听工具条
    table.on('tool(tt)', function (obj) {
        var data = obj.data;
        if (obj.event === "delete"){
            layer.confirm("确定要删除该区域?",["确定","取消"],function(){
                $.ajax({
                    url:'/area/delete',
                    data:{id:data.id},
                    success:function(data){
                        if (data.code==200)
                        {
                            layer.msg("删除成功",{icon:1,time:1000},function(){
                                search();
                            });
                        }else{
                            layer.msg(data.msg,{icon:1,time:1500});
                        }
                    }
                })
            });
        }
    });


</script>
</html>